<template>
  <div class="person">
    <h1>中国</h1>
    <h2 ref="title2">北京</h2>
    <h3>海淀</h3>
    <button @click="findH2">查找h2标签</button> <br />
  </div>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue'

// Vue中,利用 普通 标签的ref属性,查找相关的标签;而不是使用传统的id标签
let title2 = ref()

let a = ref(1)
let b = ref(2)
let c = ref(3)

function findH2() {
  console.log('Person==>', title2.value)
}

// vue3暴露当前组件的数据给其他引用的组件
defineExpose({ a, b })
</script>

<!-- scoped表示该处定义的style只在当前组件内生效 -->
<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
